<!DOCTYPE html>
<html lang="zh">
<head>
    <include file="index/index_style" title="PinPaper"/>
</head>
<body class="navbar-fixed">

<!-- header -->
<include file="index/header" menu_display="none" search_action="/"/>
<!-- / header -->

<section id="content">
    <section class="main padder">
        <div class="row">
            <!-- menu -->
            <include file="profile/menu" like="active"/>
            <!-- / menu -->
            <!--内容主体 start-->
            <div class="col-lg-12">
                <div class="row">
                    <ul class="grid effect-2" id="like-grid">
                    </ul>
                    <div id="loader">
                        <div id="loaderCircle"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>


<!-- footer -->
<include file="index/footer"/>
<!-- / footer -->

<script src="__PUBLIC__/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="__PUBLIC__/js/bootstrap.js"></script>
<!-- Imagesloaded -->
<script src="__PUBLIC__/plugin/imagesloaded.pkgd.min.js"></script>
<!-- Wookmark -->
<script src="__PUBLIC__/plugin/wookmark.min.js"></script>
<script src="__PUBLIC__/plugin/classie.js"></script>


<!-- app -->
<script src="__PUBLIC__/js/app.js"></script>
<script src="__PUBLIC__/js/app.plugin.js"></script>
<script src="__PUBLIC__/js/app.data.js"></script>

<!-- Page Script -->
<script type="text/javascript">
    (function () {

        $.extend({
            myDate: {
                /**
                 * 时间戳转换日期
                 * @param <int> unixTime    待时间戳(秒)
                 * @param <bool> isFull    返回完整时间(Y-m-d 或者 Y-m-d H:i:s)
                 * @param <int>  timeZone   时区
                 */
                UnixToDate: function(unixTime, isFull, timeZone) {
                    if (typeof (timeZone) == 'number')
                    {
                        unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
                    }
                    var time = new Date(unixTime * 1000);
                    var ymdhis = "";
                    ymdhis += (time.getUTCMonth()+1) + "/";
                    ymdhis += time.getUTCDate() + "/";
                    ymdhis += time.getUTCFullYear();
                    if (isFull === true)
                    {
                        ymdhis += " " + time.getUTCHours() + ":";
                        ymdhis += time.getUTCMinutes() + ":";
                        ymdhis += time.getUTCSeconds();
                    }
                    return ymdhis;
                }
            }
        });

        function getWindowWidth() {
            return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
        }

        //初始化瀑布流插件
        var wookmark = undefined,
                page = 1,
                isLoading = false,
                apiURL = "{:U('/news/waterfall')}",
                lastRequestTimestamp = 0,
                fadeInDelay = 1500,
                container = '#like-grid',
                $container = $(container),
                $loaderCircle = $('#loaderCircle'),
                $window = $(window),
                $document = $(document);


        //滚轮滑到底部时向服务器请求新的数据
        function onScroll(event) {
            // Only check when we're not still waiting for data.
            if (!isLoading) {
                // 滚轮距离内容底部只有100px的时候触发请求
                var closeToBottom = ($window.scrollTop() + $window.height() > $document.height() - 100);
                if (closeToBottom) {
                    // 请求间隔至少1s
                    var currentTime = new Date().getTime();
                    if (lastRequestTimestamp < currentTime - 1000) {
                        lastRequestTimestamp = currentTime;
                        loadData();
                    }
                }
            }
        }


        //刷新布局
        function applyLayout($newImages) {
            $container.append($newImages);

            imagesLoaded(container, function () {
                // Destroy the old handler
                if (wookmark === undefined) {
                    wookmark = new Wookmark(container, {
                        itemWidth: 380,
                        offset: 5,
                        outerOffset: 15,
                        verticalOffset: 5,
                        flexibleWidth: function () {
                            return getWindowWidth() < 1024 ? '100%' : '50%';
                        }
                    });
                } else {
                    wookmark.initItems();
                    wookmark.layout(true);
                }

//              设置动画 moveup
                $newImages.each(function () {
                    var $self = $(this);
                    window.setTimeout(function () {
                        $self.addClass("moveup");
                    }, Math.random() * fadeInDelay);
                });
            });
        }


        //从服务器加载数据
        function loadData() {
            isLoading = true;
            $loaderCircle.show();

            $.ajax({
                url: apiURL,
                dataType: 'json', // 不同域使用jsonp方式
                data: {page: page, type: "like"}, // Page parameter to make sure we load new data
                success: onLoadData
            });
        }


        //处理服务器数据,更新页面布局
        function onLoadData(response) {
            isLoading = false;
            $loaderCircle.hide();

            // Increment page index for future calls.
            page++;

            // 构造新闻元素代码
            var html = '',
                    data = response.data,
                    i = 0, length = data.length, news, opacity,
                    $newImages;

            for (; i < length; i++) {
                news = data[i];
                html += '<li>';
                html += '<figure>';
                html += '<figcaption>';
                html += '<div><a class="normal" href="/News/'+ news.id + '" target="_blank">';
                html += '<h3>' + news.title + '</h3>';
                html += '<p>' + news.content + '&nbsp;&nbsp;&nbsp;......</p>';
                html += '</div></a>';
                html += '<div class="line line-dashed"></div>';
                html += '<div class="text-muted text-center text-small">';
                html += '<i class="icon-tag" data-tid="'+ news.topic +'"></i>'+ news.name + '&nbsp;';
                html += '<i class="icon-time"></i>'+ $.myDate.UnixToDate(news.pubtime) +'&nbsp;';
                html += '<i class="icon-comments-alt"></i>'+ news.comments +'&nbsp;';
                html += '<span href="" class='+ ((news.islike&&news.islike=='1')?'active':'') + '>';
                html += '<i class="icon-heart-empty text"></i>';
                html += '<i class="icon-heart text-danger text-active"></i>';
                html += '</span>' + news.likes + '</div>';
                html += '</figcaption></figure></li>';
            }

            $newImages = $(html);

            // 如果到达尾页停止请求
            if (response.message == 'No more news') {
                $document.off('scroll', onScroll);
            }

            // 刷新布局
            applyLayout($newImages);
        }

        //捕获滚轮事件
        $document.on('scroll', onScroll);

        //第一次从服务器加载数据
        loadData();
    })(jQuery);


    //订阅操作
    $(".user-sub").click(function(){
        var tid = $(this).attr("data-tid");
        var action = 'subscribe';
        if( $(this).is('.active') ){
            action = 'unset';
        }
        subscribe(tid, action, this);
    });

    function subscribe(tid, action, button){
        $.ajax({
            'type': 'post',
            'data': {'tid':tid, 'action':action},
            'url': "{:U('/Home/Profile/subscribe')}",
            'dataType': 'json',
            success: function (data) {
                if (data.code == '1') {
                    if(action == 'subscribe'){
                        $(button).addClass("active");
                    }else {
                        $(button).removeClass("active");
                    }
                }
            }
        });
    }
</script>

</body>
</html>